<template>
    <div class="singer-main">
        <div class="top">
            <button @touchstart="backPage"><i class="iconfont icon-zuojiantou"></i></button>
            <h3>{{country}}{{singType}}</h3>
        </div>
        <div class="singer-list">
            <ul class="singer-ul">
                <li class="singer-li" v-for="item in showArr" :key="item.id">
                    <div class="img-part">
                            <img class="sing-img" v-lazy="item.img1v1Url" alt="" @touchstart="sendData(item.id)">
                    </div>
                    <p class="text-part">{{item.name}}</p>
                </li>
            </ul>
        </div>
        <button class="moreButton" @touchstart="getMore">                
            <span v-if="!isnone">显示更多( •̀ ω •́ )✧</span>
            <span v-if="isnone">已经没有更多数据了(っ °Д °;)っ</span>
        </button>
    </div>
</template>

<script>
export default {
    data(){
        return {
            songListArr : [],
            showArr :[],
            isnone : false,
            country : "",
            singType : ""
        }
    },
    methods : {
        getMore(){
        if (this.songListArr.length >= 6) {
            let newArr = this.songListArr.splice(0, 6);
            newArr.forEach((item) => {
              this.showArr.push(item);
            });
            this.isNone = false;
          } else if (this.songListArr.length < 6) {
            let newArr = this.songListArr.splice(0, this.songListArr.length);
            newArr.forEach((item) => {
              this.showArr.push(item);
            });
            this.isNone = true;
          }
      },
      backPage(){
          this.$router.go(-1);
      },
      sendData(getid){
            let obj = {}
                  axios.get(`/api/artist/detail?id=${getid}`).then(response=>{
                    obj.singerName = response.data.data.artist.name;
                    obj.text = response.data.data.artist.briefDesc
                    obj.bg = response.data.data.artist.cover
                    this.$router.push({path: '/SingerIndex', query : {'bg' : obj.bg,'text' : obj.text,'singerName' : obj.singerName,'id' : getid}});
        })
      }
    },
    mounted(){
        this.singType = this.$route.query.singType;
        this.country = this.$route.query.country;
        if(this.singType === this.country){
            this.country = "";
        }
        axios.get(`/api/artist/list?type=${this.$route.query.type}&area=${this.$route.query.area}`).then(response => {
            this.songListArr = [...response.data.artists];
            this.getMore();
        })
    }
}
</script>

<style lang="scss" scoped>
    .singer-main {
        width: 100%;
        margin-top: 3rem;
        padding-bottom: 10rem;
        padding-top: 3rem;

        .top {
            display: flex;
            background: rgba(233, 233, 233, 1);
            position: fixed;
            top: 2.5rem;
            width: 100%;

            >h3 {
                width: 95%;
                margin: auto;
                padding: 1rem 0rem;
                font-size: 1.3rem;
                font-weight: bolder;
            }

            >button {
                display: block;
                width: 2rem;
                text-align: center;
                margin: auto;
                border: none;
                background: transparent;

                .icon-zuojiantou {
                    font-size: 1.5rem;
                }
            }
        }

        .singer-list {
            width: 90%;
            margin:  auto;
        }

        .singer-ul {
            width: 100%;
            height: 30rem;
            overflow-y:auto;
            &::-webkit-scrollbar {
                    display: none;
            }
        }

        .singer-li {
            display: flex;
            width: 100%;
            height: 5rem;
            padding: 0.5rem 0rem ;
            border-bottom: 2px dashed rgb(156, 156, 156);
            color: #000;

            .active {
                color: #33CCBB;
            }
            
        }

        .img-part {
            width: 5rem;
            height: 5rem;
            border-radius: 0.5rem;
            overflow: hidden;

            .sing-img {
                width: 100%;
            }
        }

        .text-part {
            flex: 1;
            height: 5rem;
            line-height: 5rem;
            font-size: 1.2rem; 
            padding-left: 0.8rem;
            box-sizing: border-box;
             overflow:hidden; //超出的文本隐藏
            text-overflow:ellipsis; //溢出用省略号显示
            white-space:nowrap; //溢出不换行
        }
        }
         .moreButton {
            width: 100%;
            text-align: center;
            border: none;
            background: transparent;
            padding: 0.5rem;


            &:active {
                color: #33CCBB;
            }
        }
</style>